<!--首页tab-->
<template>
    <div class="page_dashboard">
        <div class="dashboardTop">
            <div>
                <div class="translateBlock">xx，生活更美好
                    <span style="display: none;"></span>
                </div>
                <div class="translateBlock">
                    <search
                            v-model="value"
                            position="absolute"
                            top="46px"
                            placeholder="搜索商品"
                            @on-focus="search()"
                            ref="search">
                    </search>
                </div>
                <div class="translateBlock">
                    <span>重庆站</span>
                    <img src="../../static/images/position.png" class="iconPosition" alt=""/>
                </div>
                <div style="width: 100%;overflow:scroll;-webkit-overflow-scrolling:touch;" v-show="isShowTab">
                    <tab bar-active-color="#fff" :line-width="2" prevent-default>
                        <tab-item :selected="item.isSelect" @click.native="onItemClick(item)"
                                  v-for="item in tabTtems"
                                  :key="item.index">
                            {{item.name}}
                        </tab-item>
                    </tab>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {Search, Tab, TabItem} from 'vux'
    import {goodsTypeList} from '../services/home'

    export default {
        name: "dashboard",
        components: {
            Search,
            Tab, TabItem,
        },

        props: {
            isShowTab: {
                type: Boolean,
                default: true,
            },
        },

        data() {
            return {
                results: [],
                value: '',
                goodsTypeLists: [],
                goodsType: 2,
                tabTtems: [
                    {index: 0, name: '综合', isSelect: false, id: 0},
                    {index: 1, name: '爆抢', isSelect: false, id: 1},
                    {index: 2, name: '商家推荐', isSelect: false, id: 2},
                    {index: 3, name: '精致生活', isSelect: false, id: 3},
                    {index: 4, name: '生鲜水果', isSelect: false, id: 4},
                ],
            }
        },

        mounted() {
            if (this.$store.state.user.chooseTab !== 999) {
                this.tabTtems[this.$store.state.user.chooseTab].isSelect = true;
            }
            this.getGoodsTypeList()
        },

        computed: {
            chooseTab() {
                let _chooseTab = this.$store.state.user.chooseTab;
                return _chooseTab;
            },
            chooseTabName() {
                let _chooseTabName = this.$store.state.user.chooseTabName;
                return _chooseTabName;
            },
        },

        watch: {
            chooseTab(val, oldval) {
                if (val !== 999) {
                    this.tabTtems[oldval].isSelect = false;
                    this.tabTtems[val].isSelect = true;
                }
            }
        },

        methods: {

            // 获取商品类型
            getGoodsTypeList() {
                let param = {
                    type: this.goodsType,
                }
                this.$post(goodsTypeList, param).then(res => {
                    this.goodsTypeLists = res.data;
                    res.data.forEach(item => {
                        this.tabTtems[3].id = item.type_name === this.tabTtems[3].name ? item.id : this.tabTtems[3].id;
                        this.tabTtems[4].id = item.type_name === this.tabTtems[4].name ? item.id : this.tabTtems[4].id;
                    })
                })
            },

            // 搜索
            search(){
                window.sessionStorage.setItem('checkIndex', 5)
                this.$tools.goPage('goodsSearchList')
            },

            setFocus() {
                this.$refs.search.setFocus()
            },
            resultClick(item) {
                window.alert('you click the result item: ' + JSON.stringify(item))
            },
            getResult(val) {
                console.log('on-change', val)
                this.results = val ? getResult(this.value) : []
            },
            onSubmit() {
                this.$refs.search.setBlur()
                this.$vux.toast.show({
                    type: 'text',
                    position: 'top',
                    text: 'on submit'
                })
            },
            onFocus() {
                console.log('on focus')
            },
            onCancel() {
                console.log('on cancel')
            },
            // 点击顶部tab
            onItemClick(item) {
                this.$store.dispatch('changeChooseTab', item.index)
                this.$store.dispatch('changeChooseTabName', item.name)
                window.sessionStorage.setItem('checkIndex', item.index === 0 ? 0 : 5)
                if (item.index === 0) {
                    this.$tools.goPage('/index')
                } else {
                    this.$tools.goPage_query('/burst', {name: item.name, id: item.id})
                }
            },
        },
    };
</script>

<style lang="less" rel="stylesheet/less" type="text/less">
    .page_dashboard {

        .dashboardTop {
            height: 9.24rem;
            background: url('../../static/images/homeTopBg.png') no-repeat;
            padding: 0rem 0.47rem 0 0.47rem;
            background-size: contain;
            font-size: .32rem;
            color: #fff;

            .weui-search-bar {
                background-color: transparent !important;
                padding: 0.27rem 0.54rem 0 0.59rem !important;
            }

            .weui-search-bar:before {
                border-top: none;
            }

            .weui-search-bar:after {
                border-bottom: none;
            }

            .weui-search-bar__cancel-btn, .vux-search-fixed {
                display: none !important;
            }

            .weui-search-bar__label {
                top: 0.1rem;
                left: 0.3rem;
                right: auto;
            }

            .weui-search-bar__form {
                width: 3.89rem !important;
            }

            .iconPosition {
                vertical-align: text-bottom;
            }

            .vux-tab {
                background-color: transparent !important;
            }

            .vux-tab-item {
                color: #FFDADA !important;
                font-size: 0.34rem;
                -webkit-flex: auto !important;
                flex: auto !important;
                background: transparent !important;
            }
        }
    }
</style>
